<template>
  <div>
    <!-- 顶部navbar -->
    <div class="title">
      <span class="title_icon" @click="onClickLeft">&lt;</span>
      <span class="title_name">实名认证</span>
    </div>
    <!-- 头部提示  -->
    <div class="header">
      <div class="icon">
        <img src="@/assets/anquan.png" alt="" />
      </div>
      <div class="header_tip1">进行实名认证</div>
      <div class="header_tip2">用于保障账号的安全及快速接收订单信息</div>
    </div>
    <!-- 表单 -->
    <div class="form">
      <van-form @submit="submitHandler">
        <van-field
          v-model="form.realname"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ required: true, message: '请填真实姓名' }]"
        />
        <van-field
          v-model="form.idCard"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />
        <van-field
          v-model="form.bankCard"
          name="银行卡号"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />
        <van-field name="uploader" label="身份证正面照">
          <template #input>
            <van-uploader v-model="fileList1" :after-read="afterRead1" :max-count="1" multiple/>
          </template>
        </van-field>
        <van-field name="uploader" label="身份证反面照">
          <template #input>
            <van-uploader v-model="fileList2" :after-read="afterRead2" :max-count="1" multiple/>
          </template>
        </van-field>
        <van-field name="uploader" label="银行卡照片">
          <template #input>
            <van-uploader v-model="fileList3" :after-read="afterRead3" :max-count="1" multiple/>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { post ,post_formData} from '../../http/axios'
export default {
  data() {
    return {
      realname: "",
      idCard: "",
      bankCard: "",
      fileList1:[],
      fileList2:[],
      fileList3:[],
      form:{

      }
    };
  },
  methods: {
    //顶部返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
    // 表单提交
    onSubmit(){

    },
    // 图片提交到服务器
    afterRead1(file, detail) {
      console.log(this.dataURLtoFileFun(file.content));
      let formData = new FormData();
      formData.append('file',this.dataURLtoFileFun(file.content,'file.jpg'))
      post_formData('http://121.199.29.84:8001/file/upload',formData).then(res=>{
        console.log(res.data);
        if(res.data.status === 200){
            this.form.idcardPhotoPositive ='http://121.199.29.84:8888/group1'+'/'+res.data.data.id
            this.fileList1 = [{url:'http://121.199.29.84:8888/group1'+'/'+res.data.data.id}]
        }
      })
    },
    afterRead2(file, detail) {
      console.log(this.dataURLtoFileFun(file.content));
      let formData = new FormData();
      formData.append('file',this.dataURLtoFileFun(file.content,'file.jpg'))
      post_formData('http://121.199.29.84:8001/file/upload',formData).then(res=>{
        console.log(res.data);
        if(res.data.status === 200){
            this.form.idcardPhotoNegative ='http://121.199.29.84:8888/group1'+'/'+res.data.data.id
            this.fileList2 = [{url:'http://121.199.29.84:8888/group1'+'/'+res.data.data.id}]
        }
      })
    },
    afterRead3(file, detail) {
      
      let formData = new FormData();
      formData.append('file',this.dataURLtoFileFun(file.content,'file.jpg'))
      post_formData('http://121.199.29.84:8001/file/upload',formData).then(res=>{
        
        if(res.data.status === 200){
            this.form.bankCardPhoto ='http://121.199.29.84:8888/group1'+'/'+res.data.data.id
            this.fileList3 = [{url:'http://121.199.29.84:8888/group1'+'/'+res.data.data.id}]
        }
      })
    },
    // bae64转文件对象
    dataURLtoFileFun (dataurl, filename) {
      // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    //提交审核
    submitHandler(){
      this.form.userId = this.$route.query.id
      
      post('/certification/submitCertificationApply',this.form).then(res=>{
        console.log(res.data.status);
        if(res.data.status === 200){
          
          this.$router.push('/writer/mine')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
  color: #fff;
  letter-spacing: 0.2em;
  .title_icon {
    float: left;
    margin-left: 1em;
    font-size: 24px;
    cursor: pointer;
  }
}
.header {
  .icon {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-top: 1em;
    border-radius: 50%;
    background-color: #ddfae7;
    img {
      width: 98%;
      height: 98%;
    }
  }
  .header_tip1 {
    width: 100%;
    text-align: center;
    margin-top: 1em;
    font-weight: 300;
  }
  .header_tip2 {
    margin-top: 10px;
    width: 100%;
    color: #999;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-align: center;
  }
}
.form {
  margin-top: 40px;
  padding: 0 15px;
}
</style>